<template>
  <div class="trend">
    <middle-title title="活动趋势"></middle-title>
    <div class="lineEchart" ref="lineEchart"></div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let lineEchart = ref(null)
let myEchart = null
let data = {
  xdata: ['1月', '2月', '3月', '4月', '5月', '6月'],
  ydata: [
    [29, 30, 37, 30, 33, 27],
    [14, 18, 23, 19, 20, 12],
    [22, 42, 31, 39, 25, 39]
  ]
}
onMounted(() => {
  setLineEchart()
})
const setLineEchart = () => {
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(lineEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 16 // 字体大小
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      // data: ['销售水量', '主营业务'],
      top: '4%',
      //   right: '5%',
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      }
    },
    grid: {
      top: '15%',
      left: '2%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      data: data.xdata,
      axisLabel: {
        color: '#fff',
        fontSize: 14
        // rotate: 45
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#32AFFF'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '单位：次',
        nameTextStyle: {
          color: '#ffff',
          fontSize: 15
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#32AFFF'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: 17
        },
        splitLine: {
          //修改背景线条样式
          show: true, //是否展示
          lineStyle: {
            type: 'dashed',
            color: '#5DC0FF',
            opacity: 0.35
          }
        }
      }
    ],
    series: [
      {
        name: '活动',
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 10,
        lineStyle: {
          color: '#FFC514' // 线条颜色
        },
        itemStyle: {
          color: '#feda14',
          shadowBlur: 20,
          shadowColor: '#feda14',
          shadowOffsetX: 0,
          shadowOffsetY: 0
        },
        data: data.ydata[0]
      },
      {
        name: '任务',
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,
        lineStyle: {
          color: '#14ECFF'
        },
        itemStyle: {
          color: '#14f7ff',
          shadowBlur: 20,
          shadowColor: '#14f7ff',
          shadowOffsetX: 0,
          shadowOffsetY: 0
        },
        data: data.ydata[1]
      },
      {
        name: '培训',
        type: 'line',
        // smooth: true, //是否平滑曲线显示
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 10,
        lineStyle: {
          color: '#14FF83' // 线条颜色
        },
        itemStyle: {
          color: '#14FF93',
          shadowBlur: 20,
          shadowColor: '#14fe92',
          shadowOffsetX: 0,
          shadowOffsetY: 0
        },
        data: data.ydata[2]
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style lang="scss" scoped>
.trend {
  .lineEchart {
    width: 500px;
    height: 327px;
    // background-color: red;
  }
}
</style>
